import Lottie, { AnimationItem } from "lottie-web";
import { useEffect, useState } from "react";
export default function NotFoundPage() {
  const [lottieInstance, setlottieInstance] = useState<null | AnimationItem>(
    null
  );
  useEffect(() => {
    document.title = "404";
    const lottieInstance = Lottie.loadAnimation({
      container: document.getElementById("not-found")!,
      renderer: "svg", // 或者 'canvas'
      loop: true, // 是否循环播放
      autoplay: true, // 是否自动播放
      path: "https://lottie.host/f2c60732-4652-428c-9e0b-7cfda2601d02/Cjl3CDTnbj.json",
    });
    setlottieInstance(lottieInstance);
    return () => lottieInstance.destroy(); // 销毁lottie
  }, []);
  return (
    <div className="w-full h-full">
      <div className="lottie-box w-full h-full" id="not-found"></div>
    </div>
  );
}
